<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/myUtil.js"></script>

    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="../css/page.css">

</head>
<body>
    <div class="container">

        <!--导航栏-->
        <div class="navigationBar"></div>

        <!--对应界面-->
        <div class="col-md-10">
            <div class="col-md-12" style="border: 1px solid black;">
                <!--信息分类-->
                <div class="col-md-12" style="height: 30px"></div>
                <div class="row row-no-gutters" style="font-size: 16px; color: #333333">
                    <label class="col-md-1" style="text-align: center; cursor: pointer; color: red" id="systemMessage" onclick="selectClass(1)">系统消息</label>
                    <label class="col-md-1" style="text-align: center; cursor: pointer" id="personMessage" onclick="selectClass(2)">回复消息</label>
                    <label class="col-md-1" style="text-align: center; cursor: pointer" id="friendMessage" onclick="selectClass(3)">好友聊天</label>
                </div>
                <div class="col-md-12" style="border-bottom: 1px solid black"></div>
                <div class="col-md-12" style="height: 20px"></div>

                <!--具体信息-->
                <!--信息数目提示-->
                <label class="col-md-6" style="color: #555555;" id="numberTip"></label>
                <div class="col-md-12" style="height: 20px"></div>

                <!--显示信息情况列表-->
                <div class="col-md-12" id="messageList"></div>
                <div class="col-md-12" style="height: 30px"></div>

                <!--显示翻页器-->
                <div class="myPageTurner"></div>

                <div class="col-md-12" style="height: 20px"></div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        // 翻页器函数存放
        let updatePageTurnerRoot;
        let pageTurner;

        let totalNum = 0;
        let messageSelect = 0;
        let systemMessage = $("#systemMessage");
        let personMessage = $("#personMessage");
        let friendMessage = $("#friendMessage");
        let messageList = $("#messageList");

        // 引入导航栏
        $(".navigationBar").load("navigationBar.html", function (){
            $("#userMessage").css("color", "red");
        });

        // 引入翻页器
        $(".myPageTurner").load("myPageTurner.html", function (){
            // 从翻页器中获得更新函数和翻页器
            updatePageTurnerRoot = myUpdatePageTurner;
            pageTurner = myPageTurner;

            // 设置回调函数
            myCallback = getPageMessage;

            // 设置数据条数
            getMessageNumber();
            pageTurner.attr("totalNum", totalNum);

            updatePageTurnerRoot(0, totalNum);
        });

        // 按页数获取消息
        function getPageMessage() {
            // 获取到翻页器的当前页数和最大显示数量
            let nowPage = parseInt(pageTurner.attr("nowPage"));
            let maxDisplay = parseInt(pageTurner.attr("maxDisplay"));

            // 获取对应消息
            getMessage(nowPage, maxDisplay);
        }

        // 获取指定消息类别的总条数
        function getMessageNumber() {
            $.ajaxSettings.async = false;
            $.get("/QG_PostBar/message?method=getAllMessageForNumber", {"messageClass": messageSelect}, function (data){
               totalNum = parseInt(data);
            });
            $.ajaxSettings.async = true;
        }

        // 获得对应消息消息
        function getMessage(nowPage, maxDisplay) {
            $.post("/QG_PostBar/message?method=getAllMessageByPage", {"messageClass": messageSelect, "page": nowPage, "num": maxDisplay}, function (data){
                // 先清空列表
                messageList.empty();

                // 将数据取出来并显示（将这一部分设置为同步请求，保证各个贴子的顺序）
                $.ajaxSettings.async = false;
                for (const key in data) {
                    // 获取贴吧对象
                    const message = data[key];
                    // 添加进来
                    addMessageItem(messageList, message);
                }
                $.ajaxSettings.async = true;
            }, "json");
        }

        // 信息类别选择器
        function selectClass(messageClass) {
            systemMessage.css("color", "black");
            personMessage.css("color", "black");
            friendMessage.css("color", "black");

            switch (messageClass) {
                case 1:
                    messageSelect = 0;
                    systemMessage.css("color", "red"); break;
                case 2:
                    messageSelect = 1;
                    personMessage.css("color", "red"); break;
                case 3:
                    messageSelect = 2;
                    friendMessage.css("color", "red"); break;
            }

            // 设置数据条数
            getMessageNumber();
            pageTurner.attr("totalNum", totalNum);

            updatePageTurnerRoot(0, totalNum);
            getPageMessage();
        }
    </script>
</body>
</html>